<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
        }
        .content{
            width: 250px;
            height: 100%;
        }
    </style>
    <title>表白墙</title>
</head>
<body>
    <div class="parent">
        <div class="content">
            谁:<input type="text" class="from"><br>
            对谁:<input type="text" class="to"><br>
            说什么<input type="text" class="message"><br>
            <button onclick="tijiao()">提交</button>
        </div>
    </div>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function load(){
            $.ajax({
                type: "GET",
                url: "wall",
                success: function(data,status){
                    if(data == null){
                        content.appendChild("内容为空");
                    } else{
                        let content = document.querySelector(".content");
                        for(let message of data){
                        let row = document.createElement("div");
                        row.innerHTML = message.from + "对: " + message.to + "说: " + message.message;
                        content.appendChild(row);
                    }
                    }
                }
            })
        }
        load();
        function tijiao(){
            let from = document.querySelector('.from');
            let to = document.querySelector(".to");
            let message = document.querySelector('.message');
            $.ajax({
                type: "POST",
                url: "wall",
                // data: {
                //     "from": from.val,
                //     "to": 1,
                //     "message": 1
                // },
                data: JSON.stringify({from:from.value,to:to.value,message:message.value}),
                contentType: "application/json;charset=utf-8",
                success: function(data,status){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>